import styled from "styled-components";
import { BrowserRouter, Route, Routes, useNavigate } from "react-router-dom";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Space, Spin, Input, Card, message } from "antd";
import React, { useState, useEffect } from "react";
import { login } from "../../services/user";
import { loginByExtension, hasExtension } from "../../services/polkadot-extension-handle";
import store from "../../utils/store";
import { loading, alert, confirm, notiError, notiOK, alertError } from "../../utils/antd-helper";
import * as oss from "../../services/oss";
import * as evm from "../../services/evm";
import { newAuthCode, updateAccount, applyInviteCode, initiateAuth } from "../../services/graphql";



const App = ({ className }) => {
	return (
		<div className={className} style={{ backgroundImage: "url(" + process.env.PUBLIC_URL + "/img/login-bg.png)" }}>
			<div className="con">
				<img className="img1" width={238} height={40} src={process.env.PUBLIC_URL + "/img/logo.png"} />
				<div className="t1">
					Decentralized cloud storage
				</div>
				<div className="box">
					<div>Website under maintenance</div>
					<span>This website is currently undergoing scheduled maintenance. We should be back shortly.</span>
				</div>
				<div className="t5">
					<span>Powered by</span>
					<img width={80} height={25} src={process.env.PUBLIC_URL + "/img/cess-logo.png"} />
				</div>
			</div>
		</div>
	);
};
export default styled(App)`
	width: 100%;
	height: 100vh;
	display: flex;
	overflow: hidden;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-repeat: no-repeat;
	background-size: cover;
	.top-btns {
		position: fixed;
		top: 10px;
		left: 10px;
	}
	.con {
		max-width: 600px;
		margin: 0 10px;
		border-radius: 30px;
		box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
		background-color: rgb(255, 255, 255);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		position: relative;
		top: 0;
		.goback-btn {
			width: 100px;
			height: 100px;
			position: absolute;
			top: 0px;
			left: 0px;
			cursor: pointer;
			background-image: url("/img/back.svg");
			background-repeat: no-repeat;
			background-position: center;
			background-size: 30px;
		}
		.img1 {
			width: 238px;
			height: 40px;
			margin-top: 40px;
		}
		.t1 {
			font-size: 14px;
			color: rgb(195, 195, 195);
			line-height: 37px;
			margin-bottom: 10%;
		}
		.t2,
		.t4 {
			font-size: 20px;
			font-weight: bold;
			color: rgb(51, 51, 51);
			line-height: 44px;
		}
		.t3 {
			width: 85%;
			border-radius: 48px;
			height: 48px;
			line-height: 48px;
			border: 1px solid rgb(195, 195, 195);
			background-repeat: no-repeat;
			background-position: 135px center;
			background-size: 30px;
			text-align: center;
			color: rgb(59, 59, 59);
			cursor: pointer;
			text-indent: 59px;
		}
		.t3:hover,.t3-1:hover {
			background-color: #f5f5f5;
		}
		.t3-1{
			width: 85%;
			border-radius: 48px;
			height: 48px;
			line-height: 48px;
			border: 1px solid rgb(195, 195, 195);
			color: rgb(59, 59, 59);
			cursor: pointer;
			display:flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			img{
				width:30px;
				height:30px;
				margin-right:10px;
			}
		}
		
		.link {
			text-decoration: underline;
			margin-top: 20px;
			cursor: pointer;
		}
		.box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			max-width: 470px;
			width:100%;
			gap:30px;
			padding:0 30px;
			margin:40px 0;
			div{
				font-size: 32px;
				color:#000;
				font-weight: bold;
				text-align: center;
			}
			span{
				font-size: 14px;
				color:#717171;
				text-align: center;
			}
		}
		.t5{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap:20px;
			margin: 80px 0 20px;
		}
	}
`;
